<template>
	<view>
		<view class="nav_top" :style="{paddingTop:barHeight+'px', background: hasBgc}">
			<view class="topContent">
				<view v-if="isBack" class="goBack" @click="goBack" hover-class="bgBlack999">
					<image :src="'/static/icon_back_.png'" mode=""></image>
				</view>
				<view class="tips-imag" v-if="tipsShow" @click="gotoMessge">
					<image :src="'/static/tips.png'" mode="" class="tips-imag__icon"></image>
					<text class="tips-imag__num" v-if="messageNumber">{{messageNumber}}</text>
				</view>
				<view class="title-search" v-if="searchshow">
					<image :src="'/static/search.png'" mode="" class="title-search__icon"></image>
					<input class="tips" v-model="keyWord" placeholder="Search" @confirm="$emit('seach', keyWord)"/>
				</view>
				<view class="title" :style="{color:color}">{{title}}</view>
			</view>
		</view>
		<view v-if="isHeight" class="marginBox" :style="{height:barHeight.allHeight+'px'}"></view>
	</view>
</template>
 
<script>
	import tips from '@/static/tips.png';
	export default {
		props:{
			tips,
			title:{
				type:String,
				default:'XXX'
			},
			hasBgc:{   //背景色
				type:String,
				default:''
			},
			color:{ //字体颜色
				type:String,
				default:'#fff;'
			},
			isBack:{   //是否有返回箭头
				type: Boolean,
				default:false
			},
			searchshow:{   //是否有查询框
				type: Boolean,
				default:false
			},
			backColor:{ //回退箭头颜色
				type:String,
				default:'white'
			},
			isHeight:{   //头部撑开高度
				type:Boolean,
				default:true
			},
			isNavBack:{   //固定返回前面的页面
				type:Boolean,
				default:true
			},
			tipsShow: {
				type:Boolean,
				default:true
			},
			backUrl:{    //返回到那个页面
				type:String,
				default:'index'
			},
			backNum:{   //返回几个页面
				type:Number,
				default:1
			}
		},
		data() {
			return {
				barHeight: 0,
				messageNumber: 0,
				keyWord: ''
			};
		},
		methods:{
			goBack(){
				uni.navigateBack({
					delta: 1
				})
			},
			gotoMessge() {
				uni.navigateTo({
					url: '/pages/square/message'
				});
			},
			getMessage() {
				if (!this.tipsShow || !uni.getStorageSync("openId")) {
					return
				}
				this.$http('get', '/app/me/message', {
					page: 1,
					limit: 9999
				}).then(res => {
					if (res.success) {
						const items = res.data.filter((v)=>{
							return v.state == 0
						})
						this.messageNumber = items.length || 0
					}
				})
			}
		},
		mounted() {
			this.getMessage()
		},
		created() {
			if(!this.barHeight){
				this.isBarHeight999().then((statusBarHeight)=>{
					this.barHeight = statusBarHeight
				})
			}
		}
	}
</script>
 
<style lang="scss">
.nav_top{
	width: 100vw;
	position: fixed;
	height: 100rpx;
	top: 0;
	left: 0;
	z-index: 900;
	display: flex;
	flex-direction: column;
	background-color: transparent;
	&.bgColor{
		background-color: #5FCBAD;
	}
	.topContent{
		width: 100vw;
		height: 100upx;
		position: relative;
		.tips-imag{
			position: absolute;
			top: 8rpx;
			left: 30rpx;
			.tips-imag__icon {
				width: 56rpx;
				height: 56rpx;
				z-index: 999;
			}
			.tips-imag__num {
				width: 32rpx;
				height: 32rpx;
				text-align: center;
				line-height: 32rpx;
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				color: #fff;
				background-color: #EF4042;
				border-radius: 50%;
			}
		}
		.goBack{
			position: absolute;
			top: 0;
			left: 0;
			width: 10vw;
			height: 100upx;
			display: flex;
			align-items: center;
			padding-left: 20upx;
			box-sizing: border-box;
			image{
				width: 40upx;
				height: 42upx;
			}
		}
		.title{
			text-align: left;
			width: 100%;
			height: 100%;
			line-height: 100upx;
			box-sizing: border-box;
			padding: 0 80rpx;
			font-size: 40upx;
			font-family:'自定义字体';
			color: #fff;
		}
	}
}
.title-search {
	position: absolute;
	left: 80rpx;
	top: 8rpx;
	width: 444rpx;
	height: 64rpx;
	line-height: 64rpx;
	background: rgba(31, 31, 31, 0.05);
	border-radius: 36rpx;
	padding-left: 40rpx;
	box-sizing: border-box;
	font-size: 30rpx;
	font-family: Avenir-Book, Avenir;
	font-weight: normal;
	color: rgba(31, 31, 31, 0.45);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.title-search__icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 24rpx;
	}
}
</style>